<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstarp演示</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="./css/bs.css">

</head>

<body>
  <div>
    <span class="btn btn-danger">按钮</span>
    <button class="btn btn-primary">按钮二</button>
    <span class="btn btn-success disabled">按钮三</span>
    <button class="btn btn-link">超链接</button>
  </div>
  <div class="text-bg-danger p-2 m-1">配色</div>


  <div class="img-box img-thumbnail m-3">
    <img class="img-fluid" src="../images/spiderman.jpg" alt="">
  </div>

  <div class="d-flex justify-content-center">

    <div class="m-2">
      <input type="text" class="form-control form-control-sm">
    </div>

    <div class="m-2">
      <select class="form-select form-select-sm">
        <option>湖南</option>
        <option>湖北</option>
      </select>
    </div>

    <div class="m-2">

      <label class="m-1">
        <input class="form-check-input" type="radio" name="rdo">单选1
      </label>

      <label class="m-1">
        <input class="form-check-input" type="radio" name="rdo">单选2
      </label>

    </div>


  </div>


  <div style="width: 20rem;" class="m-3">

    <div class="card">
      <div class="card-header">bootstarp</div>
      <div class="card-body">
        我们让分页（pagination）占据了一大块区域来放置相互关联的链接，
        这让链接更醒目并且易于扩充，除了这些好处，
        还为链接提供了较大的点击区域。
        分页（Pagination）是利用 HTML 的列表元素构建的，
        因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用
        nav元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。
      </div>
    </div>

  </div>

  <div>
    <button class="btn btn-primary" 
      data-bs-toggle="modal"
      data-bs-target="#dialog">弹出对话框</button>

    <!-- 弹出对话框 -->
    <div class="modal fade" id="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <span>标题</span>
          </div>
  
          <div class="modal-body">

            <div class="m-3">
              <input type="text" class="form-control" placeholder="用户名">
            </div>

            <div class="m-3">
              <input type="password" class="form-control" placeholder="密码">
            </div>
            
          </div>

        </div>
  
      </div>
    </div>

  </div>


  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
</body>

</html>